/* body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #ECEFFC;
} */

.pagination {
  --active-index: 0;
  display: flex;
  padding: 10px 20px;
  background: whitesmoke;
  border-radius: 20px;
  /* box-shadow: 0 0.3px 0.6px rgba(0, 0, 0, 0.056), 0 0.7px 1.3px rgba(0, 0, 0, 0.081), 0 1.3px 2.5px rgba(0, 0, 0, 0.1), 0 2.2px 4.5px rgba(0, 0, 0, 0.119), 0 4.2px 8.4px rgba(0, 0, 0, 0.144), 0 10px 20px rgba(0, 0, 0, 0.02); */
  list-style-type: none;
}

.pagination li {
  margin: 0 5px;
}

.pagination li.page-number {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}

.pagination li.page-number:hover a {
  color: white;
  background: #777;
}

.pagination li.page-number.active a {
  color: white;
  background: #333;
}

.pagination li.page-prev,
.pagination li.page-next {
  font-weight: 700;
}

.pagination li.page-prev {
  margin-right: 20px;
}

.pagination li.page-next {
  margin-left: 20px;
}

.pagination li a {
  display: block;
  line-height: 30px;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  color: #777;
  border-radius: 50%;
  transition: 0.3s;
}

.pagination li a.prev:hover path,
.pagination li a.next:hover path {
  fill: darken(#777, 50%);
}